<template>
	<view>
		<customNav title1="查运价" bgColor="#3957BF" :backIcon="true" backIconColor="white"></customNav>
		<view class="contentViewBox">
			<cssArcBackground :height="'140'" />
			<view class="content-view">
				<view class="content-1-box">
					<view class="start-view-box" @click="selectClick(1)">
						<view class="start-text start-text-view">始</view>
						<view class="select-text">{{start_name_obj.name}}</view>
						<view class="flex1"></view>
						<image class="right-btn" src="@/static/right_back.png"></image>
					</view>
					<view class="end-view-box" @click="selectClick(2)">
						<view class="start-text end-text-view">终</view>
						<view class="end-city-text">{{end_name_obj.name}}</view>
						<view class="flex1"></view>
						<image class="right-btn" src="@/static/right_back.png"></image>
					</view>
					<view class="btn-view btn-text" @click="searchPrice()">查询</view>
				</view>

				<view class="history-view-box">
					<view class="history-text">历史记录</view>
					<view class="clear-text" @click="logisticsRecordsEmptyClick()" v-if="historyData.length>0">清除</view>
				</view>
				<view class="list" :style="{gridTemplateColumns: `repeat(${lineNum},1fr)`}" v-if="historyData.length>0">
					<view v-for="(item,index) in historyData" :key="index">
						<view class="item_box" @click="historyItemClick(item)" >
							<view class="item-text" >{{item.start_name}}-{{item.end_name}}</view>
						</view>
					</view>
				</view>
			</view>

		</view>
		<uni-popup ref="select_ctiy_popup" :animation="true" type="bottom" @maskClick="maskClickpopup()"
			:safeArea="true" @change="changePopup()">
			<view class="popup-content-view-box">
				<view class="select-ctiy-popup-title">城市地区</view>
	<!-- 			<view class="inputboxClass">
					<image class="searchjing-image" src="@/static/search.png"></image>
					<input class="inputClass" @input="inputPhone" placeholder="请输入省份/城市"
						placeholder-class="pcs" />
				</view> -->
				<view class="list" :style="{gridTemplateColumns: `repeat(${lineNumCtiy},1fr)`}">
					<view v-for="(item,index) in popularCitiesData" :key="index">
						<view class="ctiy_item_box" @click="popularCitiesClick(item)">
							<view class="ctiy-item-text">{{item.name}}</view>
						</view>
					</view>
				</view>
				<view class="line-popup"></view>


				<view class="pcaPicker" @touchmove.stop.prevent="preventTouchMove">
					<view class="popBottom popRound">
						<picker-view :value="pcaIndex" @change="pcaChange" @pickstart="pickstart" @pickend="pickend">
							<picker-view-column>
								<block v-for="(item,index) in provinceData" :key="index">
									<view
										:class="pcaIndex[0]==index?'picker-view-item-text-select':'picker-view-item-text'">
										{{item.name}}
									</view>
								</block>
							</picker-view-column>

						</picker-view>
					</view>
				</view>

				<!-- <view class="pcaPicker" @touchmove.stop.prevent="preventTouchMove">
					<view class="popBottom popRound">
						<picker-view :value="pcaIndex" @change="pcaChange">
							<picker-view-column>
								<block v-for="(item,index) in provinceData" :key="index">
									<view
										:class="pcaIndex[0]==index?'picker-view-item-text-select':'picker-view-item-text'">
										{{item.name}}
									</view>
								</block>
							</picker-view-column>
							<picker-view-column>
								<block v-for="(item,index) in provinceData[pcaIndex[0]].children" :key="index">
									<view
										:class="pcaIndex[1]==index?'picker-view-item-text-select':'picker-view-item-text'">
										{{item.name}}
									</view>
								</block>
							</picker-view-column>
						</picker-view>
					</view>
				</view> -->

				<view class="popup-btn-view popup-btn-text" @click="confirm()">确定</view>
				<view class="height20"></view>
			</view>
		</uni-popup>
	</view>

</template>

<script>
	import customNav from "@/components/custom-nav/custom-nav.vue";
	import cssArcBackground from "@/components/cssArcBackground/cssArcBackground.vue";
	import {
		getProvinceList

	} from '@/api/base.js';
	import {
		logisticsRecords,
		logisticsRecordsEmpty,
		popularCities,
		logisticsCity
	} from "@/api/logistics.js"
	export default {
		components: {
			customNav,
			cssArcBackground
		},
		data() {
			return {
				isMoving: true,
				start_name_obj: {
					"name": "请选择始发城市"
				},
				end_name_obj: {
					"name": "请选择终点城市"
				},
				cacheStartObj: {
					"name": "请选择始发城市"
				},
				cacheEndObj: {
					"name": "请选择终点城市"
				},
				selectInta: 0,
				lineNum: 4,
				lineNumCtiy: 5,
				pcaIndex: [0, 0],
				provinceData: [],
				historyData: [],
				popularCitiesData: [],
				user_id:''
			}
		},
		onLoad() {
			// const location = uni.getStorageSync('address')
			// this.$utils.log(JSON.stringify(location))
			// if(location){
			// 	this.end_name_obj = location
			// }
			var that = this

			const value = uni.getStorageSync('login')
			logisticsCity('').then(res => {
				that.isShow = false
				this.$nextTick(() => {
					that.provinceData = res.data
					that.isShow = true
				})
			})
			popularCities(value.id).then(res => {
				this.$utils.log(JSON.stringify(res))
				this.$nextTick(() => {
					that.popularCitiesData = res.data
				})
			})


		},
		onShow(){
			var that = this
			const value = uni.getStorageSync('login')
			if (value) {
				this.user_id = value.id
				logisticsRecords(this.user_id).then(res => {
					this.$utils.log("dayin 获取到的物流历史记录  " + JSON.stringify(res))
					this.$nextTick(() => {
						that.historyData = res.data
					})
				})
			} else {
				uni.navigateTo({
					url: '/pages/login/login'
				})
			}
		},
		methods: {
			logisticsRecordsEmptyClick() {
				var that = this
				logisticsRecordsEmpty(this.user_id).then(res => {
					that.$utils.log("清除历史记录  " + JSON.stringify(res))
					that.historyData = []
					that.$forceUpdate()
				})
			},
			maskClickpopup() {},
			changePopup() {},
			selectClick(inta) {
				this.selectInta = inta
				this.$utils.log(this.selectInta)
				this.$refs.select_ctiy_popup.open()
				if (inta == 1) {
					this.cacheStartObj = this.provinceData[this.pcaIndex[0]]
				} else {
					this.cacheEndObj = this.provinceData[this.pcaIndex[0]]
				}
			},
			inputPhone(e) {

			},
			// 防穿透
			preventTouchMove() {},
			// 滚动切换
			pcaChange(e) {
				this.$utils.log(JSON.stringify(e))
				let currentIndex = e.detail.value;

				if (currentIndex[0] != this.pcaIndex[0]) {
					this.pcaIndex.splice(0, 2, currentIndex[0], 0);
				}
				// // if (currentIndex[1] != this.pcaIndex[1]) {
				// // 	this.pcaIndex.splice(1, 2, currentIndex[1]);
				// // }
				if (this.selectInta == 1) {
					this.$utils.log("进入   1   ")
					this.$utils.log("选择的始发城市" + JSON.stringify(this.cacheStartObj))
					this.cacheStartObj = this.provinceData[currentIndex[0]]

					// this.cacheStartObj = this.provinceData[currentIndex[0]].children[currentIndex[1]]

				} else {
					this.$utils.log("进入   2   ")
					this.$utils.log("选择的终点城市" + JSON.stringify(this.cacheEndObj))
					this.cacheEndObj = this.provinceData[currentIndex[0]]
					// this.cacheEndObj = this.provinceData[currentIndex[0]].children[currentIndex[1]]
				}
			},
			pickstart() {
				this.isMoving = true;
			},
			pickend() {
				this.isMoving = false;
			},
			confirm() {
				if(this.isMoving){
					// console.log('运动中，不能点击哦')
					uni.showToast({
						title: '请确认城市！',
						icon: 'none'
					})
					return
				}
				if (this.selectInta == 1) {
					this.$utils.log("进入   1   ")
					this.$utils.log("选择的始发城市" + JSON.stringify(this.cacheStartObj))
					this.start_name_obj = this.cacheStartObj

					// this.cacheStartObj = this.provinceData[currentIndex[0]].children[currentIndex[1]]

				} else {
					this.$utils.log("进入   2   ")
					this.$utils.log("选择的终点城市" + JSON.stringify(this.cacheEndObj))
					this.end_name_obj = this.cacheEndObj
					// this.cacheEndObj = this.provinceData[currentIndex[0]].children[currentIndex[1]]
				}
				this.$refs.select_ctiy_popup.close()
			},
			searchPrice() {
				if (this.start_name_obj.name == '请选择始发城市' || this.start_name_obj.name == '' || this.start_name_obj.name ==
					undefined || this.start_name_obj.name == null) {
					uni.showToast({
						title: "请选择始发城市",
						icon: 'none'
					})
					return
				}
				if (this.end_name_obj.name == '请选择终点城市' || this.end_name_obj.name == '' || this.end_name_obj.name ==
					undefined || this.end_name_obj.name == null) {
					uni.showToast({
						title: "请选择终点城市",
						icon: 'none'
					})
					return
				}
				if (this.end_name_obj.name === this.start_name_obj.name) {
					uni.showToast({
						title: '始发终点城市不可为同一城市',
						icon: 'none'
					})
					return
				}
				uni.navigateTo({
					url: '/pages/home/logistics/logisticsAskPrice?startName=' + this.start_name_obj.name + "&endName=" + this
						.end_name_obj.name +  '&startId=' +  this.start_name_obj.id +'&endId=' + this.end_name_obj.id 
				})
			},
			historyItemClick(item){
				uni.navigateTo({
					url: '/pages/home/logistics/logisticsAskPrice?startName=' + item.start_name + "&endName=" + item.end_name +  '&startId=' +  item.start_id +'&endId=' + item.end_id 
				})
			},
			popularCitiesClick(item) {
				if (this.selectInta == 1) {
					this.$utils.log("进入   1   ")
					this.$utils.log("选择的始发城市" + JSON.stringify(item))
					this.start_name_obj = item

					// this.cacheStartObj = this.provinceData[currentIndex[0]].children[currentIndex[1]]

				} else {
					this.$utils.log("进入   2   ")
					this.$utils.log("选择的终点城市" + JSON.stringify(item))
					this.end_name_obj = item
					// this.cacheEndObj = this.provinceData[currentIndex[0]].children[currentIndex[1]]
				}
				this.$refs.select_ctiy_popup.close()
			}

		}
	}
</script>

<style>
	.bac-y {
		background-color: red;
		height: 500rpx;
		width: 100%;
	}

	/**
	 * 此处为popup css相关  -----start
	 **/
	.popup-content-view-box {
		width: 750rpx;
		height: auto;
		background: #FFFFFF;
		border-radius: 28rpx 28rpx 0rpx 0rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		/* 设置绝对定位 */
		position: absolute;
		/* 距离父元素上边缘  */
		bottom: -20rpx;
		z-index: 1;
		text-align: center;
	}

	.select-ctiy-popup-title {
		font-size: 32rpx;
		font-family: Alimama ShuHeiTi;
		font-weight: bold;
		color: #1C2125;
		margin-top: 60rpx;
	}

	.inputboxClass {
		width: 694rpx;
		height: 72rpx;
		background: #F3F6FE;
		border: 1px solid #FFFFFF;
		border-radius: 36rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-bottom: 50rpx;
		margin-top: 18rpx;
		text-align: left;
	}

	.searchjing-image {
		width: 30rpx;
		height: 30rpx;
		margin-left: 32rpx;
	}

	.inputClass {
		flex: 1;
		margin-left: 12rpx;
	}

	.pcs {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #999999;
	}

	.ctiy_item_box {
		width: 128rpx;
		height: 58rpx;
		border: 2px solid #00000009;
		border-radius: 14rpx;
		line-height: 58rpx;
		text-align: center;
		margin: 4rpx;
	}

	.ctiy-item-text {
		font-size: 24rpx;
		font-family: Alibaba PuHuiTi;
		font-weight: 400;
		color: #333333;
		opacity: 1;
	}

	.height20 {
		height: 80rpx;
	}

	.line-popup {
		width: 100%;
		height: 14rpx;
		background: #F3F6FE;
		border-radius: 0rpx;
		margin-top: 36rpx;
	}

	.popup-btn-view {
		width: 654rpx;
		height: 94rpx;
		background: #0E59EA;
		opacity: 1;
		border-radius: 14rpx;
		text-align: center;
		line-height: 94rpx;
		margin-top: 48rpx;
		margin-bottom: 30rpx;
	}

	.popup-btn-text {
		font-size: 32rpx;
		font-family: Source Han Sans CN;
		font-weight: 500;
		color: #FFFFFF;
		opacity: 1;
	}

	picker-view {
		height: 300rpx;
	}

	.picker-view-item-text-select {
		text-align: center;
		line-height: 68rpx;
		font-size: 28rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #0E59EA;
		opacity: 1;
	}

	.picker-view-item-text {
		text-align: center;
		line-height: 68rpx;
		font-size: 28rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		opacity: 1;
	}

	.pcaPicker {
		height: 300rpx;
		width: 100%;
		background-color: #999999;
	}

	.pcaPicker>.popBottom {
		width: 100%;
		background-color: #ffffff;
		transition: all 0.3s ease;
		transform: translateY(100%);
	}

	.pcaPicker>.popRound {
		transition: all 0.3s ease;
		transform: translateX(0);
		opacity: 1;
	}

	/**
	 * 此处为popup css 相关  -----end
	 **/

	.list {
		display: grid;
	}

	.contentViewBox {
		width: 100%;
		height: auto;
		/* 父元素设置相对定位 */
		position: relative;
	}

	.content-view {
		/* 设置绝对定位 */
		position: absolute;
		/* 距离父元素上边缘  */
		top: 0rpx;
		z-index: 1;
		text-align: center;
		padding: 28rpx;
	}

	.content-1-box {
		width: 694rpx;
		height: 480rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 6rpx 12rpx rgba(0, 0, 0, 0.06);
		border-radius: 28rpx;

		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.start-view-box {
		width: 656rpx;
		height: 116rpx;
		background: #E6EDFD;
		border-radius: 14rpx;
		margin-top: 26rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.start-text-view {
		width: 48rpx;
		height: 48rpx;
		background: #0E59EA;
		border-radius: 8rpx;
		margin-left: 20rpx;
	}

	.start-text {
		font-size: 24rpx;
		font-family: Alibaba PuHuiTi;
		font-weight: 400;
		line-height: 48rpx;
		text-align: center;
		color: #FFFFFF;
	}

	.select-text {
		font-size: 28rpx;
		font-family: Alibaba PuHuiTi;
		font-weight: 400;
		line-height: 0rpx;
		color: #333333;
		margin-left: 14rpx;
	}

	.end-view-box {
		width: 656rpx;
		height: 116rpx;
		background: #E6EDFD;
		border-radius: 14rpx;
		margin-top: 32rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.end-text-view {
		width: 48rpx;
		height: 48rpx;
		background: #39BDBF;
		border-radius: 8rpx;
		margin-left: 20rpx;
	}

	.btn-view {
		width: 654rpx;
		height: 94rpx;
		background: #0E59EA;
		border-radius: 14rpx;
		margin-top: 44rpx;
		text-align: center;
		line-height: 94rpx;
	}

	.end-city-text {
		font-size: 28rpx;
		font-family: Alibaba PuHuiTi;
		font-weight: 400;
		line-height: 0rpx;
		color: #333333;
		margin-left: 20rpx;
	}

	.btn-text {
		font-size: 32rpx;
		font-family: Source Han Sans CN;
		font-weight: 500;
		color: #FFFFFF;
	}

	.flex1 {
		flex: 1;
	}

	.right-btn {
		width: 15.01rpx;
		height: 26.92rpx;
		margin-right: 20rpx;
	}

	.history-view-box {
		margin-top: 32rpx;
		padding: 0rpx 28rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}

	.history-text {
		font-size: 26rpx;
		font-family: Alimama ShuHeiTi;
		font-weight: bold;
		color: #999999;
	}

	.clear-text {
		font-size: 24rpx;
		font-family: Alibaba PuHuiTi;
		font-weight: 400;
		line-height: 0rpx;
		color: #333333;
	}

	.item_box {
		width: 168rpx;
		height: 58rpx;
		background: #EBEBEB;
		border-radius: 14rpx;
		text-align: center;
		line-height: 58rpx;
		margin-top: 32rpx;
	}

	.item-text {
		font-size: 24rpx;
		font-family: Alibaba PuHuiTi;
		font-weight: 400;
		color: #333333;
	}

	page {
		background-color: white;
	}
</style>